// 引入Count的UI组件
import CountUI from '../../components/Count'

import {
  createIncrementAction, 
  createDecrementAction, 
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'



/* 
  a. 一般写法
*/
// function mapStateToProps(state){
//   return {count: state}
// }

// function mapDispatchToProps(dispacth){
//   return {
//     jia:(number)=>{
//       dispacth(createIncrementAction(number))
//     },
//     jian:(number)=>{
//       dispacth(createDecrementAction(number))
//     },
//     jiaAsync:(number,time)=>{
//       dispacth(createIncrementAsyncAction(number, time))
//     }
//   }
// }


// 使用connect()() 创建并暴露一个Count的容器组件
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI)


/* 
  b. 还可以这样简写
*/
export default connect(
  state => ({count: state}),

  {
    // 只要UI组件中一调用，这里的函数就会创建一个action对象，并且react-redux会自动dispacth.
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(CountUI)